<!--  -->
<template>
  <div>
    <c-title :hide="false" :text="form.space_name"></c-title>

    <div class="per-top">
      <div class="user-box">
        <img :src="form.member ? form.member.avatar_image : ''" alt="" />
        <div class="user-detail">
          <div class="user-name">{{form.member ? form.member.nickname : ""}}</div>
          <div class="user-space">{{form.space_name}}</div>
        </div>
      </div>
      <i class="iconfont icon-a-zhuanranggai" @click="clickPopup('switchShow', true)"></i>
    </div>

    <div class="per-bottom">
      <div class="rights-use">
        <div class="use-top" >
          <div class="use-name">权益使用</div>
          <div class="use-space"  @click.stop="toUrl('aiCreateSpacePortal', {} , { business_id: business_id || 0 })">权益空间</div>
        </div>
        <div class="use-bot">
          <div class="span-use" v-for="(item,index) in form.statistics" :key="index">
            <div class="span-num">{{item.value}}</div>
            <div class="span-name">{{item.title}}</div>
          </div>
          
        </div>
      </div>

      <div class="ai-create">
        <div class="ai-title">AI创作</div>
        <div class="middle-box" v-if="form.video_add_button || form.body_add_button || form.audio_add_button">
          <img v-if="form.video_add_button" :src="form.video_cover ? form.video_cover  : `${imgPath}ai-create/ai-create-25.png`" alt="" class="video-img"  @click="toDigitalHuman('aiCreateVideoCreation',true,form.video_add_button)" />
          <div class="bottom-box classify-pane-box" v-if="!form.body_add_button && !form.audio_add_button && form.video_add_button">
            <div class="classify-pane classify-pane-top"  @click.stop="toUrl(item.h5_url, {} , {  business_id: business_id || 0 , isArrShow: item.type, title: item.title  , lip_duration_unused: item.interests ? item.interests.lip_duration_unused : ''})" v-for="(item,index) in form.navs" :key="index" >
              <img :src="item.image" alt="" />
              <div class="classify-name">{{item.title}}</div>
            </div>
          </div>
          <div class="right-img"  v-if="form.body_add_button && form.audio_add_button">
            <div class="num-img" @click="toDigitalHuman('aiCreateDigitalHuman',true,form.body_add_button)" v-if="form.body_add_button">
              <img :src="`${imgPath}ai-create/ai-create-27.png`" alt="" />
              <div class="num-box">
                <div class="num-name">数字分身</div>
                <div class="num-tip">定制专属的数字人</div>
              </div>
            </div>
            <div class="num-img clone-img"  @click="toDigitalHuman('aiCreateVoiceClon',true,form.audio_add_button)" v-if="form.audio_add_button">
              <img :src="`${imgPath}ai-create/ai-create-24.png`" alt="" />
              <div class="num-box">
                <div class="num-name">声音克隆</div>
                <div class="num-tip">定制专属音色</div>
              </div>
            </div>
          </div>
        </div>

        <div class="bottom-box" v-if="(form.body_add_button && form.audio_add_button) || (!form.body_add_button && !form.audio_add_button && !form.video_add_button)">
          <div class="classify-pane"  @click.stop="toUrl(item.h5_url, {} , { business_id: business_id || 0 , isArrShow: item.type, title: item.title , lip_duration_unused: item.interests ? item.interests.lip_duration_unused : ''})" v-for="(item,index) in form.navs" :key="index">
            <img :src="item.image" alt="" />
            <div class="classify-name">{{item.title}}</div>
          </div>
        </div>
      </div>

      <div class="ai-create ai-tools"  v-if="form.tool_list && form.tool_list.ai_tools.length">
        <div class="ai-title">AI工具</div>
        <div class="tools-box">
          <div class="tools-row" v-for="(item,idnex) in form.tool_list.ai_tools" :key="index"
            @click.stop="toUrl(item.url, {} , { business_id: business_id || 0 })"
            :style="{'background' : item.style.background}">
            <img :src="item.image" alt="" />
            <div class="tools-right">
              <div class="tools-title">{{item.title}}</div>
              <div class="tools-tip">{{item.description}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="plugin-list" v-if="form.tool_list && form.tool_list.other_tools.length">
        <div class="plugin-box" v-for="(item,idnex) in form.tool_list.other_tools" :key="index" @click.stop="toUrl(item.url, {} , { business_id: business_id || 0 })"><i class="iconfont" :style="{'backgroundImage': `url('${item.image}')` }" ></i><span>{{item.title}}</span></div>
      </div>
    </div>

    <comVideo :isArrShow="[0,3]" :business_id="business_id" ref="com_video" :lip_duration_unused="form.lip_duration_unused"></comVideo>

    <van-popup v-model="switchShow" round position="bottom" :style="{ height: '30%' }">
      <div class="switch-pane">
        <div class="top-pane">
          <span class="close-title">选择空间</span>
          <i class="iconfont icon-guanbi" @click="clickPopup('switchShow', false)"></i>
        </div>
        <div class="space-list">
          <div class="space-li" v-for="(item, index) in form.business_list" @click="changeSpace(item.business_id)">
            <div class="space-name">{{ item.title }}</div>
            <i class="iconfont icon-all_xuanze" v-if="business_id == item.business_id"></i>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import comVideo from "./comVideo";
export default {
  data() {
    return {
      switchShow: false,
      form: {},
      business_id: "",
      imgPath: ""
    };
  },

  created() {},
  components: {comVideo },

  computed: {},

  activated() {
    this.switchShow = false;
    this.business_id = this.$route.query.business_id || 0;
    this.getData();
  },

  methods: {
    toDigitalHuman(path,beforeread,beforereadval) {
      // if (beforeread && !beforereadval) {
      //   this.$toast("当前暂无创作次数，需购买相关权益");
      //   return;
      // }
      this.$router.push(this.fun.getUrl(path, {}, { business_id: this.business_id }));
    },
    async getData() {
      let { result, msg, data } = await $http.get("plugin.ai-create.frontend.controllers.center.manage", {
        business_id: this.business_id
      }, ".");
      this.switchShow = false;
      if (result == 0) return this.$toast(msg);
      this.imgPath = this.$store.state.imgPath;
      this.form = data
      this.fun.setWXTitle(this.form.space_name);
      // this.form.body_add_button = false;
      // this.form.audio_add_button = false
    },
    changeSpace(business_id) {
      this.business_id = business_id;
      this.$router.push({
        path: this.$route.path, // 保持当前路径
        query: {
          ...this.$route.query,
          business_id: business_id,
        },
      });
      this.switchShow = false;
    },
    clickPopup(name, type) {
      this[name] = type;
    },
    goVideoListPage () {
      this.$router.push(this.fun.getUrl("aiCreateVideoList", {}, { business_id: this.business_id | 0}));
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.per-top {
  width: 100%;
  height: 10.8rem;
  background: linear-gradient(#015ef5 0%, #015ef5 50%, #f5f5f5 100%);
  display: flex;
  justify-content: space-between;
  padding: 0.85rem;
  .user-box {
    display: flex;
    justify-content: center;
    height: 3.8rem;
    align-items: center;
    img {
      width: 3.8rem;
      height: 3.8rem;
      border: 0.01rem solid #ffffff;
      border-radius: 50%;
      margin: 0;
    }
    .user-detail {
      text-align: left;
      color: white;
      margin-left: 0.5rem;
      .user-name {
        font-weight: 500;
        font-size: 0.9rem;
        color: #ffffff;
        margin-bottom: 0.4rem;
      }
      .user-space {
        font-weight: 400;
        font-size: 0.75rem;
        color: #ffffff;
      }
    }
  }
  .icon-a-zhuanranggai {
    color: white;
    line-height: 2rem;
  }
}

.per-bottom {
  padding: 0.85rem 0.85rem 0 0.85rem;
  margin-top: -5.5rem;
  .rights-use {
    background: white;
    border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
    padding: 0.6rem;
    .use-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      .use-name {
        font-weight: bold;
        font-size: 0.8rem;
        color: #00001c;
      }
      .use-space {
        font-weight: 500;
        font-size: 0.75rem;
        color: #015ef5;
      }
    }
    .use-bot {
      display: flex;
      .span-use {
        width: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .span-num {
          font-weight: bold;
          font-size: 0.85rem;
          color: #00001c;
        }
        .span-name {
          font-weight: 400;
          font-size: 0.75rem;
          color: #6e6e79;
          margin-top: 0.2rem;
        }
      }
    }
  }

  .ai-create {
    background: white;
    border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
    padding: 0.6rem;
    margin-top: 0.8rem;
    .ai-title {
      font-weight: bold;
      font-size: 0.9rem;
      color: #00001c;
      margin-bottom: 0.8rem;
      text-align: left;
    }
    .middle-box {
      display: flex;
      justify-content: space-between;
      .video-img {
        height: 9rem;
        margin: 0;
        width: 49%;
        border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
      }
      .right-img {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 48.5%;
        height: 9rem;
        .num-img {
          background: linear-gradient(90deg, #eefbff 0%, #e5f1ff 100%);
          border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          height: 47%;
          padding: 0.4rem;
          width: 100%;
          img {
            width: 3rem;
            height: 3rem;
            border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
            margin: 0 0.4rem 0 0;
          }
          .num-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            line-height: 1.8;
            .num-name {
              text-align: left;
              font-weight: 600;
              font-size: 0.8rem;
              color: #00001c;
            }
            .num-tip {
              font-weight: 400;
              text-align: left;
              font-size: 0.7rem;
              color: #6e6e79;
            }
          }
        }
        .clone-img {
          background: linear-gradient(91deg, #fff7ef 0%, #ffece9 100%);
        }
      }
    }
    .top-box-cl {
      gap: 0.1rem !important; 
      margin: 0 0.2rem !important;
      flex-wrap: wrap !important;
    }
    .bottom-box {
      margin-top: 0.938rem;
      display: flex;
      gap: 0.4rem;
      .classify-pane {
        width: 19%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 3.2rem;
          height: 3.2rem;
          margin: 0;
        }
        .classify-name {
          font-weight: 400;
          font-size: 0.8rem;
          color: #00001c;
          margin-top: 0.5rem;
        }
      }
    }
    .classify-pane-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 49%;
        margin-top: 0;
        align-items: start;
        .classify-pane-top {
          width: 100%;
          img {
            width: 2.75rem;
            height: 2.75rem;
          }
          .classify-name {
            font-size: 0.75rem;
            white-space: nowrap;
          }
        }
      }
  }

  .ai-tools {
    .tools-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tools-row {
        width: 48%;
        border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
        padding: 0.4rem;
        display: flex;
        img {
          width: 3.2rem;
          height: 3.2rem;
          border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
          margin: 0;
        }
        .tools-right {
          display: flex;
          flex-direction: column;
          margin-left: 0.34375rem;
          .tools-title {
            text-align: left;
            font-weight: 600;
            font-size: 0.8125rem;
            color: #00001c;
          }
          .tools-tip {
            font-weight: 400;
            text-align: left;
            color: #6e6e79;
            font-size: 0.6875rem;
          }
        }
      }
    }
  }

  .plugin-list {
    background: white;
    border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
    padding: 0.6rem;
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .plugin-box {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.8rem;
      .iconfont {
        width: 30px;
        height: 30px;
        display: block;
        margin-bottom: 0.2rem;
        background-size: 100%;
      }
    }
  }
}

.switch-pane {
  padding: 1.2rem 0.75rem;
  .top-pane {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close-title {
      font-weight: bold;
      font-size: 0.95rem;
      color: #00001c;
    }
    .iconfont {
      width: 1.8rem;
      height: 1.8rem;
      background: #f0f0f1;
      border-radius: 50%;
      line-height: 1.8rem;
      color: #6e6e79;
    }
  }
  .space-list {
    .space-li {
      display: flex;
      justify-content: space-between;
      margin-top: 1.2rem;
      .space-name {
        font-weight: 400;
        font-size: 0.85rem;
        color: #00001c;
      }
      .icon-all_xuanze {
        color: #005ef5;
        margin-right: 0.3rem;
      }
      .no-opacity {
        opacity: 0;
      }
    }
  }
}
</style>
